$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;
.home {
  position: relative;
  width: 100%;
  background: #000;

  .section1 {
    background: #000;
    padding: 150/$f+vw 0;

    .title {
      color: #FFF;
      font-size: 180/$f+vw;
      font-weight: 700;
      text-transform: uppercase;
      margin: 0 0 10/$f+vw;
      text-align: center;
      display: flex;
      justify-content: center;
      div{
        overflow: hidden;
        position: relative;
        width: 180/$f+vw;
        p{
          position: relative;
          left: -180/$f+vw;
          transition: 1s ease;
        }
      }
      &.on{
        div{
          p{
            left: 0;
          }
        }
      }
    }

    .pick {
      width: 680/$f+vw;
      font-size: 20/$f+vw;
      color: #C3C3C3;
      margin: auto;
      text-align: center;
    }

    .button {
      margin: 36/$f+vw 0 0 0;
      display: flex;
      justify-content: center;

      a {
        width: 242/$f+vw;
        height: 66/$f+vw;
        border: 1px solid #fff;
        border-radius: 5/$f+vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16/$f+vw;
        color: #fff;
        transition: .6s;

        &:hover {
          background: #fff;
          color: #1B2170;
        }

        &:not(:last-child) {
          margin: 0 16/$f+vw 0 0;
        }
      }
    }
  }

  .section2 {
    //padding: 343px 0 43px 0;
    padding: 100/$f+vw 0 43/$f+vw 0;
    position: relative;
    z-index: 1;

    .all_fix {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      //height: 1080/$f+vw;
      z-index: -1;
      //overflow: hidden;
      * {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .wrap {
      width: 825/$f+vw;
      margin: auto;

      .eng {
        color: #FFF;
        font-family: NanumMyeongjo;
        font-size: 96/$f+vw;
        font-weight: 800;
        text-transform: uppercase;
        text-align: center;
        opacity: .1;
      }

      .title {
        font-size: 48/$f+vw;
        color: #fff;
        font-weight: 900;
        text-transform: capitalize;
        margin: 32/$f+vw 0 120/$f+vw 0;
        text-align: center;
      }

      .text {
        color: #FFF;
        text-align: center;
        font-family: NanumMyeongjo;
        font-size: 96/$f+vw;
        font-weight: 800;
        text-transform: uppercase;
      }

      .pick {
        margin: 16/$f+vw auto 0;
        width: 537/$f+vw;
        font-size: 20/$f+vw;
        color: #fff;
        text-align: center;
      }
    }
  }

  .section3 {
    position: relative;
    z-index: 2;

    .wrap {
      .flex {
        display: flex;

        .item {
          width: 688/$f+vw;
          height: 458/$f+vw;
          position: relative;
          overflow: hidden;

          &:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: linear-gradient(241deg, rgba(0, 0, 0, 0.00) 55.16%, rgba(0, 0, 0, 0.62) 87.56%);
            opacity: 0;
            transition: .6s;
          }

          .img {
            width: 100%;
            height: 100%;
            transition: .6s;
            object-fit: cover;
          }

          .position {
            position: absolute;
            left: 72/$f+vw;
            bottom: 72/$f+vw;
            z-index: 2;
            transform: translateY(130/$f+vw);
            transition: 1s;

            h1 {
              font-size: 32/$f+vw;
              color: #fff;
              font-weight: 700;
              margin: 0 0 81/$f+vw;
            }

            .pick {
              color: #FFF;
              font-size: 20/$f+vw;
              font-weight: 400;
              opacity: 0;
              transition: 1s;
            }

            a {
              margin: 38/$f+vw 0 0 0;
              font-size: 16/$f+vw;
              color: #fff;
              display: block;
              text-transform: capitalize;
              opacity: 0;
              transition: 1s;
            }
          }

          &:hover {
            .img {
              transform: scale(1.1);
            }

            &:after {
              opacity: 1;
            }

            .position {
              transform: translateY(0);

              .pick, a {
                opacity: 1;
              }
            }
          }
        }
      }

      .flex1 {
        .item1 {
          width: 942/$f+vw;
          height: 636/$f+vw;
        }

        .item2 {
          margin: 263/$f+vw 0 0 90/$f+vw;
          width: 688/$f+vw;
          height: 458/$f+vw;
        }
      }

      .flex2 {
        margin: 0 0 0 287/$f+vw;

        .item {
          width: 688/$f+vw;
          height: 458/$f+vw;
        }

        .item2 {
          margin: 85/$f+vw 0 0 101/$f+vw;

        }
      }

      .flex3 {
        margin: 0 0 0 372/$f+vw;
      }
    }
  }

  .section4 {
    padding: 187/$f+vw 0 98/$f+vw 0;
    position: relative;
    z-index: 5;
    .wrap {
      width: 1484/$f+vw;
      margin: auto;

      .title {
        h1 {
          font-size: 48/$f+vw;
          color: #fff;
          text-transform: uppercase;
          font-weight: 900;
        }

        p {
          width: 767/$f+vw;
          font-size: 20/$f+vw;
          color: #F5F5F5;
        }
      }

      .content {
        margin: 32/$f+vw 0 0 199/$f+vw;
        position: relative;
        display: flex;
        width: max-content;

        .sjx {
          position: absolute;
          top: -43/$f+vw;
          left: 217/$f+vw;
          width: 700/$f+vw;
        }

        .item {
          width: 390/$f+vw;
          height: 390/$f+vw;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          position: relative;
          z-index: 1;

          @keyframes opacityAnimate {
            0%{
              opacity: 1;
            }
            40%{
              opacity: .2;
            }
            80%{
              opacity: 1;
            }
            100%{
              opacity: 1;
            }
          }

          .circle_bg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            animation: 3s opacityAnimate infinite linear;
          }

          h1 {
            font-size: 36/$f+vw;
            font-weight: 700;
            color: #fff;
            margin: 0 0 6/$f+vw;
          }

          p {
            font-size: 20/$f+vw;
            color: #fff;
          }
        }

        .item2 {
          margin: 245/$f+vw 0 0 181/$f+vw;
        }

        .item3 {
          position: relative;
          left: -217/$f+vw;
          top: -251/$f+vw;
        }
      }
    }
  }

  .section5 {
    overflow: hidden;
    .wrap {
      .title {
        width: 1484/$f+vw;
        margin: auto;

        h1 {
          color: #FFF;
          font-family: NanumMyeongjo;
          font-size: 48/$f+vw;
          font-weight: 800;
          line-height: 68/$f+vw; /* 141.667% */
          text-transform: uppercase;
        }

        .more {
          margin: 6/$f+vw 0 0 0;
          width: 242/$f+vw;
          height: 66/$f+vw;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16/$f+vw;
          color: #fff;
          border: 1px solid #fff;
          border-radius: 5/$f+vw;
          transition: .6s;

          &:hover {
            background: #fff;
            color: #1B2170;
          }
        }
      }

      .content {
        position: relative;
        height: 828/$f+vw;

        .position {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          pointer-events: none;

          .point {
            position: absolute;
            pointer-events: auto;
            text-align: center;

            span {
              color: #FFF;
              font-family: Montserrat;
              font-size: 48/$f+vw;
              font-weight: 700;
              text-transform: uppercase;
              margin: 0 0 10/$f+vw;
              position: relative;

              &:after {
                content: attr(data-text);
                display: inline-block;
              }
            }

            p {
              color: #FFF;
              font-size: 20/$f+vw;
              font-weight: 300;
            }

            .center {
              margin: 16/$f+vw auto 0;

              .line {
                width: 1px;
                height: 64/$f+vw;
                background: rgba(255, 255, 255, 0.26);
                margin: auto;
              }

              .circle {
                width: 8/$f+vw;
                height: 8/$f+vw;
                border-radius: 50%;
                background: #fff;
                margin: auto;
              }
            }

            &.point_1 {
              bottom: 158/$f+vw;
              left: 560/$f+vw;
            }

            &.point_2 {
              bottom: 283/$f+vw;
              left: 881/$f+vw;

              .line {
                height: 90/$f+vw;
              }
            }

            &.point_3 {
              bottom: 480/$f+vw;
              left: 1181/$f+vw;

              .line {
                height: 110/$f+vw;
              }
            }

            &.point_4 {
              bottom: 645/$f+vw;
              left: 1542/$f+vw;

              .line {
                height: 133/$f+vw;
              }
            }
          }

        }

        .line1 {
          width: 100%;
          height: 100%;
          transition: 2s;
          clip-path: inset(0 100% 0 0);
        }

        .svg {
          width: 100%;
          //width: 1920px;
          height: 100%;
          position: absolute;
          top: -2/$f+vw;
          left: 0;
          //transform-origin: bottom left;

          path {
            stroke-dashoffset: 4902;
            stroke-dasharray: 4902;
            transition: 3s;
          }

        }

        &.on {
          .line1{
            clip-path: inset(0 0 0 0);
          }
          .svg {
            path {
              stroke-dasharray: 4000;
            }
          }
        }
      }
    }
  }

  .section6 {
    padding: 180/$f+vw 0 127/$f+vw;
    background: linear-gradient(180deg, rgba(250, 251, 255, 1) 0%, #FAFBFF 100%);

    * {
      box-sizing: border-box;
    }

    .wrap {
      width: 1365/$f+vw;
      margin: auto;

      .title {
        text-align: center;
        margin-bottom: 4vw;
        h1 {
          color: #000;
          text-align: center;
          font-family: NanumMyeongjo;
          font-size: 96/$f+vw;
          font-weight: 800;
          text-transform: uppercase;
          margin: 0 0 40/$f+vw;
        }

        p {
          color: #363940;
          text-align: center;
          font-size: 16/$f+vw;
          font-weight: 400;
          line-height: 22/$f+vw; /* 137.5% */
        }
      }

      .content {
        padding: 0 50/$f+vw;
        margin: 114/$f+vw 0 0 0;
        position: relative;
        .matter{
          display: flex;
          justify-content: space-between;
          align-items: center;
          pointer-events: none;
          opacity: 0;
          transform: translateY(20px);
          &:not(:first-child) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
          }
          &.on{
            opacity: 1;
            transform: translateY(0);
            transition: 1s;
          }
        }
        .l {
          flex: 1;
          height: fit-content;
          background: #fff;
          padding: 26/$f+vw 0 80/$f+vw 40/$f+vw;
          border-radius: 5/$f+vw;
          overflow: hidden;
          box-shadow: 0 3px 29px -8px rgba(192, 196, 204, .1);

          .headline {
            display: flex;
            align-items: center;
            margin: 0 0 50/$f+vw;

            .img {
              width: 182/$f+vw;
            }

            .text {
              h1 {
                color: #121212;
                font-size: 24/$f+vw;
                font-weight: 700;
                margin: 0 0 10/$f+vw;
              }

              p {
                color: #1B2170;
                font-size: 20/$f+vw;
                font-weight: 400;
                text-transform: capitalize;
              }
            }
          }

          .pick {
            width: 530/$f+vw;
            color: #666;
            font-size: 20/$f+vw;
            font-weight: 400;
            line-height: 26/$f+vw; /* 130% */
            text-transform: capitalize;
          }
        }

        .images {
          width: 587/$f+vw;
          height: 330/$f+vw;
          margin: 0 0 0 40/$f+vw;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .flex {
        display: flex;
        //margin: 1vw 0 0 0;
        .swiper_go{
          width: 100%;
          padding: 0.5vw 0;
          .swiper-wrapper{
            transition-timing-function: linear!important;
          }
        }
        .img {
          width: 100%;
          height: 70/$f+vw;
          background: #fff;
          box-shadow: 0 3px 29px -8px rgba(192, 196, 204, .5);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          img{
            object-fit: contain;
            max-width: 90%;
            max-height: 90%;
          }
        }
      }
      .more{
        width: 262/$f+vw;
        height: 61/$f+vw;
        border: 1px solid #1B2170;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1B2170;
        text-align: center;
        border-radius: 50/$f+vw;
        margin: 60/$f+vw auto 0;
        font-family: Montserrat;
        font-size: 20/$f+vw;
        font-weight: 700;
        text-transform: uppercase;
        transition: .6s;
        &:hover{
          background: #1B2170;
          color: #fff;
        }
      }
    }
  }

  .section7{
    background: #fff;
    padding: 110/$f+vw 0 92/$f+vw 0;
    .wrap{
      width: 1568/$f+vw;
      margin: auto;
      .title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        h1{
          color: #000;
          font-family: NanumMyeongjo;
          font-size: 48/$f+vw;
          font-weight: 800;
          text-transform: uppercase;
        }
        .button{
          display: flex;
          .circle{
            width: 46/$f+vw;
            height: 46/$f+vw;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #BBBBBB;
            cursor: pointer;
            transition: .6s;
            &:first-child{
              transform: rotate(180deg);
              margin: 0 10/$f+vw 0 0;
            }
            svg{
              width: 20/$f+vw;
              height: 20/$f+vw;
              path{
                fill: #BBBBBB;
                transition: .6s;
              }
            }
            &:hover{
              border: 1px solid #1B2170;
              path{
                fill: #1B2170;
              }
            }
          }
        }
      }
      .content{
        margin: 110/$f+vw 0 0 0;
        .listSwiper{
          width: 100%;
          padding: 0 0 63/$f+vw;
          .swiper-slide{
            a{
              width: 100%;
              display: block;
              .img{
                height: 292/$f+vw;
                width: 100%;
                overflow: hidden;
                img{
                  width: 100%;
                  height: 100%;
                  transition: .6s;
                }
              }
              .text{
                margin: 29/$f+vw 0 0 0;
                h1{
                  font-size: 24/$f+vw;
                  color: #363940;
                  margin: 0 0 7/$f+vw;
                }
                .time{
                  font-size: 14/$f+vw;
                  color: #333;
                  margin: 0 0 16/$f+vw;
                }
                .pick{
                  width: 402.066/$f+vw;
                  max-width: 100%;
                  color: #363940;
                  font-size: 16/$f+vw;
                  font-weight: 400;
                  line-height: 22/$f+vw; /* 137.5% */
                  margin: 0 0 17/$f+vw;
                }
                .label{
                  width: fit-content;
                  padding: 0 17/$f+vw;
                  height: 30/$f+vw;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 14/$f+vw;
                  color: #000;
                  border-radius: 8/$f+vw;
                  background: #E6E6E6;
                }
              }
              &:hover{
                .img{
                  img{
                    transform: scale(1.05);
                  }
                }
              }
            }
            &:nth-child(2n-1) {
              a{
                transform: translateY(63/$f+vw);
              }
            }
          }
        }
      }

      .more{
        width: 262/$f+vw;
        height: 61/$f+vw;
        border: 1px solid #1B2170;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1B2170;
        text-align: center;
        border-radius: 50/$f+vw;
        margin: 100/$f+vw auto 0;
        font-family: Montserrat;
        font-size: 20/$f+vw;
        font-weight: 700;
        text-transform: uppercase;
        transition: .6s;
        &:hover{
          background: #1B2170;
          color: #fff;
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top: 60px;

    .section1{
      padding: 40px 0 ;
      .title{
        font-size: 26px;
        margin: 0 0 20px;
        div{
          width: fit-content;
        }
      }
      .pick{
        font-size: 14px;
        line-height: 2;
        width: 90%;
      }
      .button{
        margin: 20px 0 0 0;
        a{
          width: 158px;
          height: 44px;
          font-size: 12px;
          &:not(:last-child){
            margin: 0 15px 0 0;
          }
        }
      }
    }
    .section2{
      padding: 50px 0;
      .wrap{
        width: 90%;
        .eng{
          font-size: 22px;
        }
        .title{
          font-size: 22px;
          margin: 15px 0 20px 0;
        }
        .pick{
          width: 100%;
          font-size: 14px;
          line-height: 2;
          margin: 25px 0 0 0;
        }
      }
    }
    .section3{
      .wrap{
        width: 90%;
        margin: auto;
        .flex{
          flex-direction: column;
          margin: 0!important;
          .item{
            width: 100%;
            height: auto;
            margin: 0 0 20px!important;
            &:after{
              opacity: 1;
            }
            .position{
              left: 3%;
              bottom: 10%;
              transform: translateY(0);
              h1{
                font-size: 20px;
                margin: 0 0 30px;
              }
              .pick{
                opacity: 1;
                font-size: 14px;
                line-height: 1.5;
              }
              a{
                font-size: 16px;
                opacity: 1;
                margin: 15px 0 0 0;
              }
            }
          }
        }
      }
    }

    .section4{
      padding: 50px 0;
      .wrap{
        width: 90%;
        .title{
          h1{
            font-size: 24px;
            color: #fff;
            margin: 0 0 20px;
          }
          p{
            width: 100%;
            font-size: 14px;
            line-height: 2;
          }
        }
        .content{
          margin: 20px 0 0 0;
          display: flex;
          width: 100%;
          justify-content: space-between;
          .sjx{
            display: none;
          }
          .item{
            width: 28vw;
            height: 28vw;
            margin: 0!important;
            top: 0!important;
            left: 0!important;
            h1{
              font-size: 18px;
              margin: 0 0 5px;
            }
            p{
              font-size: 8px;
            }
          }
        }
      }
    }

    .section5{
      .wrap{
        .title{
          width: 90%;
          h1{
            font-size: 18px;
            margin: 0 0 20px;
            line-height: 1.2;
          }
          .more{
            width: 158px;
            height: 44px;
            font-size: 12px;
          }
        }
        .content{
          height: auto;
          .position{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 5%;
            left: 0;
            box-sizing: border-box;
            position: relative;
            left: -4vw;
            .point{
              //position: static;
              .center{
                display: none;
              }
              span{
                font-size: 4.5vw;
              }
              p{
                font-size: 3vw;
              }
            }
          }
        }
      }
    }

    .section6{
      padding: 50px 0;
      .wrap{
        width: 90%;
        overflow: hidden;
        .title{
          margin: 0 0 20px;
          h1{
            font-size: 24px;
            margin: 0 0 20px;
          }
          p{
            font-size: 14px;
          }
        }
        .content{
          .matter{
            flex-direction: column;
          }
          .l{
            width: 100%;
            padding: 6% 4%;
            .headline{
              .img{
                width: 100px;
              }
              .text{
                h1{
                  font-size: 16px;
                  margin: 0 0 10px;
                }
                p{
                  font-size: 14px;
                }
              }
            }
            .pick{
              width: 100%;
              font-size: 14px;
              line-height: 2;
            }
          }
          .images{
            width: 100%;
            height: auto;
          }
        }
        .flex{
          margin: 0;
          //display: grid;
          //grid-template-columns: repeat(2,1fr);
          //gap: 20px;
          .swiper_go{
            padding: 7px 0;
            overflow: unset;
          }
          .img{
            width: 100%;
            height: 70px;
          }
        }
        .more{
          width: 158px;
          height: 44px;
          font-size: 12px;
          border-radius: 50px;
          margin: 35px auto 0;
        }
      }
    }

    .section7{
      padding: 30px 0;
      .wrap{
        width: 90%;
        .title{
          flex-direction: column;
          align-items: unset;
          h1{
            font-size: 22px;
          }
          .button{
            .circle{
              width: 37px;
              height: 37px;
              &:first-child{
                margin: 0 15px 0 0;
              }
              svg{
                width: 15px;
                height: 15px;
              }
            }
          }
        }
        .content{
          margin: 22px 0 0 0;
          .listSwiper{
            .swiper-slide{
              a{
                transform: translateY(0) !important;
                .img{
                  height: auto;
                }
                .text{
                  margin: 15px 0 0 0;
                  h1{
                    font-size: 18px;
                    margin: 0 0 10px;
                  }
                  .time{
                    font-size: 14px;
                    margin: 0 0 10px;
                  }
                  .pick{
                    font-size: 14px;
                    width: 100%;
                    line-height: 1.4;
                    margin: 0 0 15px;
                  }
                  .label{
                    width: 70px;
                    height: 23px;
                    font-size: 12px;
                    border-radius: 5px;
                  }
                }
              }
            }
          }
        }
        .more{
          width: 158px;
          height: 44px;
          font-size: 12px;
          border-radius: 50px;
          margin: 35px auto 0;
        }
      }
    }
  }
}